<template>
  <div id="app">
    <router-view></router-view>
    <!-- 添加点击事件来切换播放状态 -->
    <img class="yinyueBtn" :src="isPlaying ? musicUrl1 : musicUrl2" alt="" @click="play">
    <audio ref="audio" :src="my_mp3"></audio>
    <div class="ceshikuai" @click="ceshianjian"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// 图片路径
import musicUrl1 from './assets/image3/yinyueBtn.png';
import musicUrl2 from './assets/image3/yinyueGbBtn.png';
import my_mp3 from './assets/yinyue.mp3';
const isPlaying = ref(true)
const ceshiVue = ref(0)
const audio = ref<HTMLAudioElement | null>(null);
import {Session,Local} from './utils/storage'
import {ElMessage} from "element-plus";
const play = () => {
  if(isPlaying.value){
    if (audio.value) {
      audio.value.pause();
      isPlaying.value = !isPlaying.value
    }
  } else {
    if (audio.value) {
      audio.value.play();
      isPlaying.value = !isPlaying.value
    }
  }

};

const ceshianjian = () => {
  ceshiVue.value++
  if(ceshiVue.value > 5){
    Session.clear()
    Local.clear()
    ElMessage.info('缓存已清除')
    ceshiVue.value = 0
  }
}
onMounted(() => {
  play()
});
</script>

<style>
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#app {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
}

.yinyueBtn {
  position: absolute;
  right: 0;
  top: 0;
  width: 35px;
  cursor: pointer; /* 添加鼠标指针样式 */
  z-index: 99999999999999;
}
.ceshikuai{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  cursor: pointer; /* 添加鼠标指针样式 */
  z-index: 99999999999999;
}
</style>